<template>
  <div class="risk-statistics">
    <span class="title">设备详情</span>
    <div class="content">
      <el-row style="width: 100%">
        <el-col :span="12">
          <div class="col-class">
            <el-table
              :cell-style="columnbackgroundStyle"
              :data="tableData"
              :show-header="false"
              :border="true"
            >
              <el-table-column prop="name"></el-table-column>
              <el-table-column prop="value"></el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="all">
            <div class="title">环境采样率</div>
            <div>
              <barChart :xData="xData" unit="%" :yData="yData" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getStatisticWeek } from "@/api/platformManage";
import { onlineRate } from "@/api/sceneManage";
import barChart from "./barChart";
export default {
  name: "deviceInfo",
  components: { barChart },
  inject: ["curFieldPatternId", "curDate"],
  data() {
    return {
      alertNum: {
        TEMPERATURE: 0,
        HUMIDITY: 0,
        CO2: 0,
        PM25: 0,
        PM10: 0,
      },
      alertData: [],
      timeData: [],
      alertTime: {
        TEMPERATURE: 0,
        HUMIDITY: 0,
        CO2: 0,
        PM25: 0,
        PM10: 0,
      },
      xData: ["温度", "相对湿度", "CO₂", "PM2.5", "PM10"],
      tableData: [
        {
          name: "工作状态",
          value: "环境采样",
        },
        {
          name: "在线状态",
          value: "在线",
        },
        {
          name: "本日工作时长",
          value: "4h",
        },
        {
          name: "本日巡检圈数",
          value: "3次",
        },
      ],
      totalAlert: 0,
      xData: [],
      yData: [],
    };
  },
  computed: {
    fieldPatternId() {
      return this.curFieldPatternId();
    },
    ts() {
      return this.curDate();
    },
  },
  watch: {
    ts(newValue, oldValue) {
      if(newValue){
      this.getBarChartDataFun();
      }
    },
  },
  mounted() {},
  methods: {
    columnbackgroundStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        //让下标为1的列数背景颜色显示为红色（颜色自定义根据大家需求来）
        return "background:#EFF6FF;";
      }
    },
    //获取平台预警数量
    getBarChartDataFun() {
      let data = {
        fieldPatternId: this.fieldPatternId,
        ts: this.ts,
      };
      onlineRate(data).then((res) => {
        let value = res.value;
        this.xData = value.map((e) => {
          return e.point;
        });
        this.yData = value.map((e) => {
          return e.rate*100;
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.risk-statistics {
  height: 300px;
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  .title {
    font-size: 16px;
    font-weight: bold;
    line-height: 21px;
    color: #0a0a0a;
  }
  .vice-title {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #707070;
    margin-left: 10px;
  }
  .content {
    margin-top: 15px;
    display: flex;
    align-items: center;
    .text {
      font-size: 16px;
      font-weight: 400;
      line-height: 21px;
      color: #535353;
      margin-right: 20px;
    }
    .all {
      .title {
        font-family: "Microsoft YaHei";
        font-style: normal;
        font-weight: 700;
        font-size: 18px;
        line-height: 24px;
        align-items: center;
        text-align: center;
        color: #0a0a0a;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          display: inline-block;
          left: 0;
          right: 0;
          margin: auto;
          bottom: -8px;
          width: 80px !important;
          height: 6px;
          background-color: rgba(181, 222, 255, 1);
        }
      }
      .unit {
        position: relative;
        left: 40px;
        font-family: "Microsoft YaHei";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        text-align: right;
        color: #a7afb7;
      }
      .bg {
        height: 200px;
        background-image: url("../../../../assets/platformDetail/Vector.png");
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .num {
        width: 70%;
        margin: auto;
        text-align: center;
        font-family: "Microsoft YaHei";
        font-style: normal;
        font-weight: 700;
        font-size: 36px;
        line-height: 150px;
        color: #1d99ef;
      }
      .tips {
        font-size: 14px;
        font-weight: 400;
        line-height: 19px;
        color: #707070;
        text-align: center;
      }
    }
    .alert_num {
      .title {
        border-bottom: 2px solid #3d88f8;
      }
    }
    .alert_time {
      .title {
        border-bottom: 2px solid #f8b61b;
      }
    }
    .alert_num,
    .alert_time {
      .title {
        font-size: 16px;
        font-weight: 400;
        line-height: 40px;
        text-align: center;
        color: #0d0c0c;
        margin-bottom: 10px;
      }

      .detail {
        padding-top: 15px;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #1a1919;
        .num {
          font-size: 20px;
          font-weight: bold;
          line-height: 24px;
          color: #1a1a1a;
        }
        .left_flex {
          display: flex;
          align-items: center;
          vertical-align: middle;
          .el-image {
            margin-right: 5px;
            display: flex;
            width: 12px;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1670px) {
  .risk-statistics {
    .content {
      display: flex;
      align-items: center;
      .text {
        font-size: 16px;
        font-weight: 400;
        line-height: 21px;
        color: #535353;
        margin-right: 20px;
      }
      .all {
        .num {
          width: 100%;
          margin: auto;
          background-position: center;
          background-size: 100% 100%;
          font-family: "Microsoft YaHei";
          font-style: normal;
          font-weight: 700;
          font-size: 36px;
          line-height: 150px;
          color: #1d99ef;
        }
        .tips {
          font-size: 14px;
          font-weight: 400;
          line-height: 19px;
          color: #707070;
          text-align: center;
        }
      }
    }
  }
}
</style>
